<template>
	<view class="">
		<view class="content">
			<tui-loading v-if="loadingTips" :isMask="true"></tui-loading>
			<!-- 旅程计划列表 -->
			<view v-if="isData" class="contentList">
				<!-- 标签页 -->
				<tui-tab :current="currentTab" :size="30" :tabs="tabs" bold color="#999" selectedColor="#4186F5"
					sliderBgColor="#4186F5" @change="changeTabs"></tui-tab>
				<scroll-view class="planList" scroll-y="true">
					<view v-if="dataList.length>0" class="planList">
						<view v-for="(item,index) in dataList" :key="index" class="planItem"
							@click="selectDetail(item,index)">
							<view class="itemTop">
								<view class="itemTopL">
									<view class="itemStatus">
										<image :src="statusBg(item.status,item.lineType)" mode="aspectFill"
											style="width: 100rpx; height: 100rpx;">
										</image>
										<text v-if="item.status===0">待开始</text>
										<text v-else-if="item.status === 7 && item.lineType === '拼团游'">待成团</text>
										<text v-else-if="item.status ===1">进行中</text>
										<text v-else>已完成</text>
									</view>
									<view class="itemImage">
										<image :src="item.themeImg" mode="scaleToFill"></image>
									</view>
								</view>
								<view class="itemTopR">
									<view class="itemTitle">
										{{ item.name }}
									</view>
									<view class="itemTypeTag">
										{{ item.lineType }}
									</view>
									<view class="itemDes">
										{{ item.scenicCount }}个景点 | {{ item.taskCount }}个任务 |
										全程:{{ Math.ceil(item.distance / 100) / 10 }}KM
									</view>
								</view>
							</view>
							<view class="itemButtom">
								<view class="itemDate">
									出行日期:
									<text> {{ item.startTime != null ? item.startTime : '-' }}</text>
								</view>
								<view v-if="item.status === 0 && item.lineType === '拼团游'" class="memberNum">
									人数:
									<text class="memberNumPing">{{ item.nowCount }}
									</text>
									/
									<text>{{ item.allCount }}</text>
								</view>
								<view v-else class="memberNum">
									人数:
									<text>{{ item.nowCount }}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 无数据状态 -->
					<view v-else style="flex: 1; justify-content: center;">
						<tui-no-data>暂无数据</tui-no-data>
					</view>
				</scroll-view>
			</view>
			<!-- 无计划状态 -->
			<view v-else-if="dataLoaded" class="noData">
				<view class="noPlanIcon">
					<image mode="aspectFit"
						src="https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file39162cf755ef44228a8c0bf7f92696d0.png">
					</image>
					<text>再怎么找也没有啦...</text>
				</view>
				<!-- <view class="createPlan">
          创建旅程计划
        </view> -->
				<!-- 	<view class="selectMore">
          查看更多路线>>
        </view> -->
			</view>

			<view class="block5">
				<view v-if="dataList.length < total" class="">
					<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
				</view>

				<view v-else class="noMore">
					<tui-nomore backgroundColor="#F2F2F2" text="到底了" v-if="dataList.length > 0"></tui-nomore>
				</view>
			</view>
		</view>



		<tabbar :index="2"></tabbar>
		<zy-modal></zy-modal>
	</view>

</template>

<script>
	import tabbar from "@/components/tabbar.vue";
	import {
		getTravePlanList
	} from '@/api/tourplan.js'

	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				total: 0,
				pageHeight: 750,
				loadingTips: false, //加载提示
				isData: false, //是否有数据
				currentTab: 0, //列表索引
				tabs: ['全部', '待成团', '待开始', '进行中', '已完成'],
				dataList: [], //路线方案列表
				dataLoaded: false,
				objData: {
					pageNumber: 1,
					pageSize: 10,
					tel: "",
					status: "",
				},
			}
		},
		onLoad() {
			const that = this
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight
				},
				fail: function(err) {
					console.log(err)
				}
			});
			this.objData.tel = uni.getStorageSync("userinfo").phone
		},
		onReachBottom() {
			this.objData.pageNumber += 1
			this.getPlanList()
		},
		onShow() {
			const that = this
			// that.loadingTips = true //打开加载提示
			this.initData()
		},

		methods: {
			//初始化数据
			initData() {
				const that = this
				that.getPlanList()
			},
			//获取旅程列表--所有
			getPlanList() {
				const that = this
				var data = {}
				for (let key in this.objData) {
					if (this.objData[key] != '') {
						data[key] = this.objData[key]
					}
				}
				getTravePlanList(data).then(res => {
					if (res) {
						this.isData = true
					}
					if (this.objData.pageNumber > 1) {
						res.list.forEach(item => {
							this.dataList.push(item)
						})
						this.total = res.total
					} else {
						that.dataList = res.list
						this.total = res.total
					}

					this.dataLoaded = true
				}).catch(err => {
					that.loadingTips = false
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 5000,
					})
					this.dataLoaded = true
				})
			},

			//获取旅程列表--状态
			getPlanListStatus(status) {
				this.objData.pageNumber = 1
				this.objData.status = status
				this.getPlanList()
			},
			//动态设置状态背景
			statusBg(status, type) {
				if (status === 7) {
					return 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/planStatus.png'
				} else if (status === 0) {
					return 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/planStatus2.png'
				} else if (status === 1) {
					return 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/planStatus3.png'
				} else {
					return 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/planStatus4.png'
				}
			},

			//切换tab状态
			changeTabs(e) {
				const that = this
				this.currentTab = e.index
				switch (e.index) {
					case 0:
						that.getPlanListStatus("")
						break;
					case 1:
						that.getPlanListStatus(7)
						break;
					case 2:
						that.getPlanListStatus(0)
						break;
					case 3:
						that.getPlanListStatus(1)
						break;
					case 4:
						that.getPlanListStatus(2)
						break;
					default:
						that.getPlanList()
				}
			},

			//查看对应的路线详情
			selectDetail(item, index) {
				uni.navigateTo({
					url: '/pages/tourplan/planDetail/planDetail?planItem=' + encodeURIComponent(JSON.stringify(
						item))
				})
			},

			//获取更多数据处理
			getMoreData() {
				const that = this
			},

		},
	}
</script>
<style>
	@import url("index.css");
</style>